import { Module } from "vuex";
import { GlobalDataProps, actionWrapper } from "./index";
import { RespData, RespListData } from "./respTypes";
import {PageData} from './editor'

// export interface TemplateProps {
//   id: number;
//   title: string;
//   coverImg: string;
//   author: string;
//   copiedCount: number;
// }
// 可以复用editor的pageData属性, 然后需要去掉props和setting
export type TemplateProps = Required<Omit<PageData, 'props'|'setting'>>


// const testData: TemplateProps[] = [
//   {
//     id: 1,
//     title: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-889755.png",
//     author: "作者1",
//     copiedCount: 0,
//   },
//   {
//     id: 2,
//     title: "Vue3",
//     coverImg: "http://static-dev.imooc-lego.com/imooc-test/sZHlgv.png",
//     author: "作者2",
//     copiedCount: 10,
//   },
//   {
//     id: 3,
//     title: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-323204.png",
//     author: "作者4",
//     copiedCount: 20,
//   },
//   {
//     id: 4,
//     title: "Vue3",

//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-677311.png",
//     author: "作者5",
//     copiedCount: 30,
//   },
//   {
//     id: 5,
//     title: "Vue3",

//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-726751.png",
//     author: "作者9",
//     copiedCount: 40,
//   },
//   {
//     id: 6,
//     title: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-682056.png",
//     author: "作者2",
//     copiedCount: 50,
//   },
//   {
//     id: 7,
//     title: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-133701.png",
//     author: "作者1",
//     copiedCount: 0,
//   },
// ];

export interface TemplatesProps {
  data: TemplateProps[];
  totalTemplates: number;
}

const templates: Module<TemplatesProps, GlobalDataProps> = {
  state: {
    data: [],
    totalTemplates: 16,
  },
  mutations: {
    fetchTemplates(state, rawData: RespListData<TemplateProps>) {
      // console.log('fetchTemplates',rawData.data.list);
      state.data = [ ...state.data,...rawData.data.list];
      state.totalTemplates = rawData.data.count? rawData.data.count : 8;

    },
    fetchTemplate(state, rawData: RespData<TemplateProps>) {
      // console.log('fetchTemplate',rawData);
      state.data = [rawData.data];
      state.totalTemplates = 1; 
    },
  },
  actions: {
    // fetchTemplates(context){
    //   // 获取服务端的海报模板数据
    //   return axios.get('/templates').then((res)=>{
    //     context.commit('fetchTemplates', res.data)
    //     return res.data
    //   })
    // }
    fetchTemplates: actionWrapper("/templates", "fetchTemplates"),
    // fetchTemplateDetail(context, id: string) {
    //   const data = context.getters.getTemplateById(id);
    //   if (data) return Promise.resolve(data);
    //   // 直接调用axios
    //   // return axios(`/templates/${id}`, {
    //   //   opName: "fetchTemplate",
    //   //   method: "get",
    //   // } as ICustomAxiosConfig).then((res) => {
    //   //   context.commit("fetchTemplate", res.data);
    //   //   console.log("fetchTemplateDetail", res.data);
    //   //   console.log("fetchTemplateDetail", res.config);

    //   //   return res.data;
    //   // });
    //   // 不直接调用，不然还要重复传opName， 但是内部调用需要再call一下(因为是双层函数了)， 所以再wrapper里面增加了对参数拼接url的逻辑， 具体见index里面
    //   return actionWrapper(`/templates/${id}`, "fetchTemplate").call(this,context);
    // },
    fetchTemplateDetail: actionWrapper('/templates/:id', "fetchTemplate"),
  },
  getters: {
    getTemplateById: (state, getters, rootState) => (id: number) => {
      return state.data.find((item) => parseInt(item.id) === id);
    },
  },
};

export default templates;
